<lv-list>
  <lv-list-item
    *ngFor="let item of data"
    [(lvExpand)]="item.rowExpand"
    [lvExtra]="extraRender"
    [lvActions]="[actionsRender]"
    [lvExpandRender]="expandRender"
    (lvExpandChange)="expanded($event, item)"
  >
    <lv-list-item-meta
      [lvDataSource]="item"
      [lvAvatar]="avatarRender"
      [lvTitle]="item.title"
      [lvDescription]="descriptionRender"
    ></lv-list-item-meta>

    <ng-template #extraRender>
      <span>{{ item.extra }}</span>
    </ng-template>

    <ng-template #expandRender>
      <span>{{ item.description || item.title }}</span>
    </ng-template>
  </lv-list-item>
</lv-list>

<ng-template #avatarRender let-data>
  <span class="list-demo-avatar">
    <img [src]="data.image" alt="avatar" />
  </span>
</ng-template>

<ng-template #descriptionRender let-data>
  <div>
    <p style="margin-bottom: 4px">{{ data.description }}</p>
    <lv-tag [(ngModel)]="tags"></lv-tag>
  </div>
</ng-template>

<ng-template #actionsRender>
  <lv-operation-menu [lvItemsFn]="getItems" lvMaxShowNum="2"></lv-operation-menu>
</ng-template>
